<template>
  <div class="home">
    <h1>{{count}}</h1>
    <button @click="count++">count++</button>
    <button @click="falg=!falg">show?disable</button>
    <AboutViewVue v-if="falg"/>
  </div>
</template>

<script>
import { onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref } from 'vue'
import AboutViewVue from './AboutView.vue';
export default {
  components:{
    AboutViewVue
  },
  beforeCreate(){
    console.log('---beforeCreate---');
  },
  created(){
    console.log('---created---');
  },
  beforeMount(){
    console.log('---beforeMount---');
  },
  mounted(){
    console.log('---mounted---');
  },
  setup() {
    let count=ref(0)
    let falg=ref(false)
    onBeforeMount(()=>{
      console.log('---beforeCreate---');
    })
    onMounted(()=>{
      console.log('---onMounted---');
    })
    onBeforeUpdate(()=>{
      console.log('---onBeforeUpdate---');
    })
    onUpdated(()=>{
      console.log('---onUpdated---');
    })
    onBeforeUnmount(()=>{
      console.log('---onBeforeUnmount---');
    })
    onUnmounted(()=>{
      console.log('---onUnmounted---');
    })
    return {
      count,falg
    }
  },
  //打印结果
  // 12 ---beforeCreate---
  // 15 ---created---
  // 26 ---beforeCreate---
  // 18 ---beforeMount---
  // 29 ---onMounted---
  // 21 ---mounted---
  // 32 ---onBeforeUpdate---
  // 35 ---onUpdated---
}
</script>
